<template>
  <div style="display: flex;width: 100%;">
    <div :class="[isTab?'item':'item1',active===index?(isTab?'active':''):'']" v-for="(it,index) in list" :key="index" @click="change(index)">
      {{it.text}}
    </div>
    <div style="flex:1;text-align: right;"   @click="switchEye"  v-if="showEye" >
      <JTab size="small" v-model="dis" :list="diss"></JTab>
    </div>
    <div style="flex:1;text-align: right;" v-if="showRange">
      <div style="width: 260px;">
        <JTab v-model="range" :list="tabs" @change="changet" />
      </div>
    </div>
  </div>
</template>
<script>
import { IconEyeopen,IconEyeclose } from '@opentiny/vue-icon'

export default {
  props: {
    list: {type: Array, default: () => []},
    showRange: {type: Boolean, default: true},
    isTab: {type: Boolean, default: true},
    showEye: {type: Boolean, default: false},
    showAllrange: {type: Boolean, default: false},
    defaultValue: {type: String, default: ''},
  },
  components: {
    IconEyeopen: IconEyeopen(),
    IconEyeclose: IconEyeclose(),
  },
  data () {
    return {
      active: 0,
      diss: [
        {id: '显示', name: '显示'},
        {id: '隐藏', name: '隐藏'},
      ],
      dis: '隐藏',
      range: '近一周',
      text: this.defaultValue,
      eyeType: 'IconEyeopen'
    }
  },
  emits: ['change'],
  computed: {
    tabs () {
      let obj =  [
        {id: '近一周', name: '近一周'},
        {id: '近30天', name: '近30天'},
        // {id: '近半年', name: '近半年'},
        {id: '近一年', name: '近一年'},
      ]
      if(this.showAllrange) obj.push({id: '全部', name: '全部'})
      return obj
    }
  },
  methods: {
    switchEye () {
      if(this.eyeType === 'IconEyeopen') {
        this.eyeType = ''
      }
      if(this.eyeType === 'IconEyeclose') {
        this.eyeType = 'IconEyeopen'
      }
    },
    change (index) {
      this.active = index
      this.text = this.list[index].text
      this.emit()
    },
    emit () {
      this.$emit('change', {
        billType: this.text,
        range: this.range,
      })
    },
    changet () {
      this.emit()
    }
  }
}
</script>
<style scoped lang="scss">
.item1 {
  padding: 3px 0;
  font-size: 16px;
  margin-right: 20px;
  font-weight: bold;
  user-select: none;
  color: #515A6E;
}
.item {
  padding: 3px 0;
  font-size: 16px;
  margin-right: 20px;
  font-weight: bold;
  user-select: none;
  color: #515A6E;
  &:hover {
    cursor: pointer;
    color: #1e9fff;
  }
  &.active {
    border-bottom: 3px solid #1e9fff;
    color: #1e9fff;
  }
}
.eye {
  &:hover {
    cursor: pointer;
    color: #1e9fff;
  }
}
</style>